<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="contents">
    <div class="contetn_left">
      <div class="pagetab">
        <!-- <div class="item">实时监测</div> -->
      </div>
      <ItemWrap
        class="contetn_left-top contetn_lr-item"
        title="总报到率（三证合一）"
      >
        <LeftTop
          :allStudentsData="allStudentsData"
          :reportedStudentsData="reportedStudentsData"
        />
      </ItemWrap>
      <ItemWrap
        class="contetn_left-center contetn_lr-item"
        title="各学院报到率"
      >
        <LeftCenter
          :allStudentsData="allStudentsData"
          :reportedStudentsData="reportedStudentsData"
        />
      </ItemWrap>
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="实时报到情况"
        style="padding: 0 10px 16px 10px"
      >
        <LeftBottom
          :allStudentsData="allStudentsData"
          :reportedStudentsData="reportedStudentsData"
        />
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <CenterMap
        class="contetn_center_top"
        :allStudentsData="allStudentsData"
        :reportedStudentsData="reportedStudentsData"
      />
      <ItemWrap
        class="contetn_center-bottom large-title"
        title="智能问答"
        :border-type="12"
      >
        <CenterBottom />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="企微账号激活情况"
      >
        <RightTop :accountData="accountStatusData" />
      </ItemWrap>
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="认证账号激活情况"
      >
        <RightCenter :accountData="accountStatusData" />
      </ItemWrap>
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="实时报警信息"
      >
        <RightBottom />
      </ItemWrap>
    </div>
  </div>
</template>

<script>
  import LeftTop from "./left-top.vue";
  import LeftCenter from "./left-center.vue";
  import LeftBottom from "./left-bottom.vue";
  import CenterMap from "./center-map.vue";
  import CenterBottom from "./center-bottom.vue";
  import RightTop from "./right-top.vue";
  import RightCenter from "./right-center.vue";
  import RightBottom from "./right-bottom.vue";
  import {
    allStudentsJson,
    httpReportedStudents,
    httpAccountStatus,
  } from "@/api";

  export default {
    components: {
      LeftTop,
      LeftCenter,
      LeftBottom,
      CenterMap,
      RightTop,
      RightCenter,
      RightBottom,
      CenterBottom,
    },
    data() {
      return {
        allStudentsData: {},
        reportedStudentsData: {},
        accountStatusData: {},
        timer: null,
        accountTimer: null,
      };
    },
    filters: {
      numsFilter(msg) {
        return msg || 0;
      },
    },
    async created() {
      // 初始化所有数据
      await this.initializeData();

      // 启动轮询（在初始数据加载完成后）
      this.startPolling();
    },
    beforeDestroy() {
      this.clearTimer();
    },
    methods: {
      // 初始化所有数据
      async initializeData() {
        console.log("开始初始化数据...");

        // 并行加载所有数据以提高性能
        const promises = [
          this.loadAllStudentsData(),
          this.loadReportedStudentsData(),
          this.loadAccountStatusData(),
        ];

        try {
          await Promise.all(promises);
          console.log("所有数据初始化完成");
        } catch (error) {
          console.error("数据初始化过程中出现错误:", error);
        }
      },

      // 获取学生总览数据
      async loadAllStudentsData() {
        try {
          const res = await allStudentsJson();
          this.allStudentsData = res || {};
        } catch (error) {
          this.allStudentsData = {};
        }
      },

      // 获取报到统计数据
      async loadReportedStudentsData() {
        try {
          const res = await httpReportedStudents();
          if (res && res.code === "0" && res.data) {
            this.reportedStudentsData = res.data;
          } else {
            this.reportedStudentsData = {};
          }
        } catch (error) {
          this.reportedStudentsData = {};
        }
      },

      // 获取账号状态数据
      async loadAccountStatusData() {
        try {
          const res = await httpAccountStatus();
          if (res && res.code === "0" && res.data) {
            this.accountStatusData = res.data;
          } else {
            this.accountStatusData = {};
          }
        } catch (error) {
          this.accountStatusData = {};
        }
      },

      // 启动轮询
      startPolling() {
        this.clearTimer();

        // 每10分钟轮询一次报到数据（学生总览数据相对稳定，不需要频繁更新）
        this.timer = setInterval(() => {
          this.loadReportedStudentsData();
        }, 60000 * 10);

        // 每10分钟轮询一次账号状态数据
        this.accountTimer = setInterval(() => {
          this.loadAccountStatusData();
        }, 60000 * 10);
      },

      // 清理定时器
      clearTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
        if (this.accountTimer) {
          clearInterval(this.accountTimer);
          this.accountTimer = null;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 内容
  .contents {
    .contetn_left,
    .contetn_right {
      width: 540px;
      box-sizing: border-box;
    }

    .contetn_center {
      width: 720px;
    }

    //左右两侧 三个块
    .contetn_lr-item {
      height: 310px;
    }

    .contetn_center_top {
      width: 100%;
      height: 380px; // 增加地图高度从320px到380px
      margin-top: 12px;
    }

    // 中间
    .contetn_center {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 8px; // 减少间距从16px到8px
    }

    .contetn_center-bottom {
      height: 580px; // 调整智能问答的高度
      flex: 1;

      // 为智能问答标题添加大标题样式
      &.large-title {
        :deep(.title-inner) {
          font-size: 26px !important;
          letter-spacing: 5px !important; // 增加字间距
        }

        :deep(.zuo),
        :deep(.you) {
          width: 26px !important; // 增大装饰图标
          height: 18px !important;
          margin-top: 9px !important;
        }
      }
    }

    //左边 右边 结构一样
    .contetn_left,
    .contetn_right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;
    }
  }

  @keyframes rotating {
    0% {
      -webkit-transform: rotate(0) scale(1);
      transform: rotate(0) scale(1);
    }
    50% {
      -webkit-transform: rotate(180deg) scale(1.1);
      transform: rotate(180deg) scale(1.1);
    }
    100% {
      -webkit-transform: rotate(360deg) scale(1);
      transform: rotate(360deg) scale(1);
    }
  }
</style>
